<template>
  <view class="page-content">
    <view class="person-msg">
      <view class="swiper-box">
        <u-swiper
          :list="detailInfo.photoImgArr"
          :circular="false"
          :effect3d="true"
          :autoplay="false"
          bg-color="transparent"
          height="492"
          mode="none"
          effect3d-previous-margin="0"
        ></u-swiper>
      </view>
      <view class="person-msg-content">
        <view class="box">
          <view class="common-box">
            <view class="font_2">{{ detailInfo.petName }}</view>
            <form-item-title text="基本信息"></form-item-title>

            <view class="grid">
              <view class="flex-col items-start grid-item">
                <text class="font_3">品种</text>
                <text class="font_5 mt-11">{{ detailInfo.breed }}</text>
              </view>
              <view class="flex-col items-start grid-item">
                <text class="font_3">体重</text>
                <text class="font_5 mt-11">{{ detailInfo.weight }}</text>
              </view>
              <view class="flex-col items-start grid-item">
                <text class="font_3">宠物年龄</text>
                <text class="mt-10 font_5">{{ detailInfo.age }}</text>
              </view>
              <view class="flex-col items-start grid-item">
                <text class="font_3">疫苗接种情况</text>
                <text class="mt-10 font_5">{{
                  detailInfo.ifVaccination == 1 ? '已接种' : '未接种'
                }}</text>
              </view>
            </view>
          </view>
          <view class="common-box">
            <form-item-title text="主人描述"></form-item-title>
            <view class="beizhu-msg">
              {{ detailInfo.remark ? detailInfo.remark : '' }}
            </view>
          </view>
          <view class="common-box">
            <form-item-title text="出售地址"></form-item-title>
            <map
              style="
                width: 100%;
                height: 320rpx;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                margin-top: 28rpx;
              "
              :latitude="detailInfo.lng"
              :longitude="detailInfo.lat"
            >
            </map>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <view class="form-box">
        <view class="flex-row justify-between items-center group_16">
          <view class="flex-col button_3">
            <text class="self-start font_3 text_28">期望价格</text>
            <view class="flex-row items-center self-stretch section_11 mt-7">
              <text class="text_31">￥</text>
              <text class="text_30">{{ detailInfo.price }}</text>
            </view>
          </view>
          <view class="flex-col justify-start items-center button_4"
            ><text class="font text_29">聊一聊</text></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
import { queryAdoptDetailById } from '@/api/cwbl.js'

export default {
  components: {
    formItemTitle,
  },
  data() {
    return {
      detailInfo: null,
    }
  },
  onLoad: function (option) {
    this.getDetail(option.id)
  },
  methods: {
    async getDetail(id) {
      let res = await queryAdoptDetailById(id)
      this.detailInfo = res.data
      this.detailInfo.photoImgArr = this.detailInfo.photo
        ? this.detailInfo.photo.split(',')
        : []
    },
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  padding-bottom: 120rpx;
  height: 100%;
  background: linear-gradient(
    180deg,
    #fcd610 0%,
    #ffffff 50%,
    rgba(252, 214, 16, 0) 100%
  );
  display: flex;
  flex-direction: column;

  .person-msg {
    background: #f6f6f6;
    flex: 1;
    overflow-y: auto;

    .person-msg-content {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .box {
        background: #fff;
        width: 90%;
        margin-top: -40rpx;
        border-radius: 24rpx;
        z-index: 88888;
      }
      .person-pic {
        width: 132rpx;
        height: 132rpx;
        background: #ffffff;
        border-radius: 50%;
        margin-top: 50rpx;
      }

      .person-name {
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        margin-top: 24rpx;
      }

      .person-age-sex {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        margin-top: 8rpx;
        display: flex;

        > text {
          &:first-child {
            margin-left: 0;
          }

          display: block;
          margin-left: 24rpx;
        }
      }

      .person-desc {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        margin-top: 24rpx;
        padding: 0 48rpx;
        text-align: center;
        line-height: 44rpx;
      }
    }
  }
  .common-box {
    padding: 32rpx 38rpx;
    border-bottom: solid 8rpx #f6f6f6;
    .font_2 {
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 28rpx;
    }
    .beizhu-msg {
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }
    .mt-11 {
      margin-top: 22rpx;
    }

    .grid-image {
      width: 168rpx;
      height: 166rpx;
      border-radius: 16rpx;

      > image {
        width: 168rpx;
        height: 166rpx;
        border-radius: 16rpx;
      }
    }

    .grid {
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 0;
      column-gap: 99.96rpx;

      .grid-item {
        padding: 28rpx 0rpx;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22rpx;
          color: #999999;
        }

        .font_5 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.34rpx;
          font-weight: 700;
          color: #000000;
        }
      }
    }

    .map-box {
      height: 312rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      background-color: #000;
    }
  }
}
.bottom-box {
  padding: 16rpx 0;
  background: #ffffff;
  box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 9999999;

  .mt-7 {
    margin-top: 14rpx;
  }

  .group_16 {
    padding-left: 36rpx;
    padding-right: 28rpx;

    .button_3 {
      width: max-content;

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.4rpx;
        font-weight: 700;
        color: #666666;
      }

      .text_28 {
        color: #000000;
      }

      .section_11 {
        padding: 6rpx 20rpx;
        margin-right: 40rpx;

        .text_31 {
          color: #000000;
          font-size: 24rpx;
          line-height: 17.72rpx;
        }

        .text_30 {
          color: #ff7676;
          font-size: 40rpx;
          line-height: 28.48rpx;
          width: max-content;
        }
      }
    }

    .button_4 {
      padding: 28rpx 0;
      background-color: #fbd610;
      border-radius: 68rpx;
      flex: 1;
      height: 84rpx;

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        line-height: 30.02rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_29 {
        line-height: 29.88rpx;
      }
    }
  }
}
</style>